<template>
  <div style="margin: 20px; margin-left: 0px;">
    <el-form ref="xForm" :model="form">
      <el-form-item prop="name">
        <el-card class="box-card">
          <div slot="header">
            <h3 style="margin: 0">新增分组名称</h3>
          </div>
          <div>
            <el-input v-model="form.name" placeholder="新增分组组名" />
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header">
            <el-autocomplete
              v-model="autoData.vehicleLicenseNumber"
              :fetch-suggestions="(queryString, cb)=>querySearchAsync('vehicle', queryString, cb)"
              placeholder="请输入车牌号"
              :clearable="true"
              @select="handleSelect"
            />
            <el-autocomplete
              v-model="autoData.name"
              :fetch-suggestions="(queryString, cb)=>querySearchAsync('name', queryString, cb)"
              placeholder="请输入司机姓名"
              :clearable="true"
              @select="handleSelect"
            />
            <el-autocomplete
              v-model="autoData.phone"
              :fetch-suggestions="(queryString, cb)=>querySearchAsync('phone', queryString, cb)"
              placeholder="请输入联系电话"
              :clearable="true"
              @select="handleSelect"
            />
            <el-button type="primary" @click="insertNewData">增加</el-button>
          </div>
          <vxe-table ref="xTable" resizable border highlight-hover-row :data="tableData">
            <vxe-table-column field="vehicleLicenseNumber" title="车牌号" />
            <vxe-table-column field="name" title="司机姓名" />
            <vxe-table-column field="phone" title="联系电话" />
            <vxe-table-column field="vehicleClassificationName" title="车辆类型" />
            <vxe-table-column title="操作" width="100px" fixed="right">
              <template slot-scope="scope">
                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                  <el-button type="text" @click="funcDelete(scope.row.partyCode)">
                    <i class="el-icon-delete" />
                  </el-button>
                </el-tooltip>
              </template>
            </vxe-table-column>
          </vxe-table>
        </el-card>
      </el-form-item>
      <el-form-item>
        <div style="text-align: right;">
          <el-button @click="funcCancel">取 消</el-button>
          <el-button type="primary" @click="funcSubmit">确 定</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Vue from "vue";
import "xe-utils";
import VXETable from "vxe-table";
import "vxe-table/lib/index.css";
import XEUtils from "xe-utils";
import VXEUtils from "vxe-utils";
Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ["cookie"] });
import { addOrUpdateVehicleTeam } from "@/api/shipment";
export default {
  name: "VehicleTeamAdd",
  props: {
    restaurants: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      tableData: [],
      partyCode: "",
      form: {
        name: "",
        driverCodes: []
      },
      tempData: null,
      autoData: {
        vehicleLicenseNumber: "",
        name: "",
        phone: ""
      }
    };
  },
  created() {
    this.partyCode = this.$route.query.partyCode ? this.$route.query.partyCode : "";
  },
  methods: {
    // 新增司机
    insertNewData() {
      if (this.tempData) {
        var data = JSON.parse(JSON.stringify(this.tempData));
        this.tempData = null;
        // 检测是否有重复项
        if (this.form.driverCodes.indexOf(data.partyCode) > -1) {
          this.$message({ message: "该司机已存在，不能重复添加！", type: "warning" });
        } else {
          this.form.driverCodes.unshift(data.partyCode);
          this.tableData.unshift(data);
        }
        this.autoData.vehicleLicenseNumber = "";
        this.autoData.name = "";
        this.autoData.phone = "";
      } else {
        this.$message({ message: "请选择司机！", type: "error" });
      }
    },
    // 删除
    funcDelete(partyCode) {
      var index = this.form.driverCodes.indexOf(partyCode);
      if (index > -1) {
        this.form.driverCodes.splice(index, 1);
      }
      this.tableData = this.tableData.filter(item => {
        return item.partyCode !== partyCode;
      });
    },
    // 模糊查询 车牌号/司机姓名/联系电话
    querySearchAsync(type, queryString, cb) {
      switch (type) {
        case "vehicle":
          this.autoData.vehicleLicenseNumber = queryString;
          var temArr1 = this.filterList();
          temArr1.forEach(item => {
            item.value = item.vehicleLicenseNumber;
          });
          cb(temArr1);
          break;
        case "name":
          this.autoData.name = queryString;
          var temArr2 = this.filterList();
          temArr2.forEach(item => {
            item.value = item.name;
          });
          cb(temArr2);
          break;
        case "phone":
          this.autoData.phone = queryString;
          var temArr3 = this.filterList();
          temArr3.forEach(item => {
            item.value = item.phone;
          });
          cb(temArr3);
          break;
      }
    },
    // 筛选
    filterList() {
      var list = this.restaurants
        .filter(item => {
          if (item.vehicleLicenseNumber) {
            return (
              item.vehicleLicenseNumber.indexOf(
                this.autoData.vehicleLicenseNumber
              ) !== -1
            );
          }
        })
        .filter(item => {
          if (item.name) {
            return item.name.indexOf(this.autoData.name) !== -1;
          }
        })
        .filter(item => {
          if (item.phone) {
            return item.phone.indexOf(this.autoData.phone) !== -1;
          }
        });
      return list;
    },
    // 选中
    handleSelect(item) {
      this.tempData = item;
      this.autoData.vehicleLicenseNumber = this.tempData.vehicleLicenseNumber;
      this.autoData.name = this.tempData.name;
      this.autoData.phone = this.tempData.phone;
    },
    // 数据重置
    initData() {
      this.tempData = null;
      this.tableData = [];
      this.form = { name: "", driverCodes: [] };
      this.autoData = { vehicleLicenseNumber: "", name: "", phone: "" };
    },
    // 提交
    funcSubmit() {
      if (this.form.name) {
        if (this.form.driverCodes.length > 0) {
          var data = Object.assign(
            {
              name: this.form.name,
              driverCodes: this.form.driverCodes.join(",")
            },
            { partyCode: this.partyCode }
          );
          const rLoading = this.openLoading();
          addOrUpdateVehicleTeam(data).then(response => {
            rLoading.close();
            this.initData();
            this.$message({ message: response.msg, type: "success" });
            this.$emit("fatherAddMethod");
          });
        } else {
          this.$message({ message: "请增加组员！", type: "error" });
        }
      } else {
        this.$message({ message: "请输入分组名称！", type: "error" });
      }
    },
    // 取消
    funcCancel() {
      this.$emit("fatherCancelMethod", "add");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-card {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0;
  }
  /deep/.el-card__header {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}
</style>

<style>
.vxe-table .vxe-body--column:not(.col--ellipsis),
.vxe-table .vxe-footer--column:not(.col--ellipsis),
.vxe-table .vxe-header--column:not(.col--ellipsis) {
  padding: 6px 0;
}
.vxe-toolbar {
  padding: 0 0 10px 0;
}
</style>
